<template>
<!-- 教程组件的标签栏组件 -->
  <div class="teach_bar">
    <span v-for="i in tablist" :key="i.id" @click="getId(i.id)" :class="currId==i.id?'current':''">{{
      i.name
    }}</span>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  name: "TeachTab",

  data() {
    return {
      tablist: [],
      currId: 6,
      ComName:'JaPan',
    };
  },
  created() {
    request("https://m.lanqb.com/api/course-group-list").then((data) => {
      console.log(data.course_fields);
      this.tablist = data.course_fields;
    });
  },
  mounted() {},

  methods: {
    getId(id) {
      this.currId = id;
       switch (id) {
          case 6:
            this.ComName = "JaPan";
            break;
            case 7:
            this.ComName = "OldView";
            break;
            case 8:
            this.ComName = "GameView";
            break;        
            case 10:
            this.ComName = "BusinessView";
            break;    
             case 12:
            this.ComName = "PaperView";
            break;      
            case 5:
            this.ComName = "DesignView";
            break;  
             case 2:
            this.ComName = "ModelView";
            break;      
             case 4:
            this.ComName = "AnimationView";
            break;  
        
        }
        this.$emit("getCom",this.ComName)
    },
  },
};
</script>

<style lang="scss" scoped>
.current {
  color: black !important;
  font-weight: bolder !important;
  font-size: 20px;
}
.teach_bar {
  display: flex;
  overflow-x: scroll;
  height: 59px;
  line-height: 59px;
  background-color: white;
  scrollbar-width: none;
  span {
    flex-shrink: 0;
    margin: 0 5px;
    padding: 0 5px;
    user-select: none;
    color: gray;
  }
}
</style>
